<template>
  <ul class="filter-data-container">
    <li class="left-condition">
      <!-- 城市、门店按钮组 -->
      <div class="btn-group">
        <!-- 城市 -->
        城市
        <el-cascader
          size="mini"
          :options="cityOptions"
          :props="props"
          placeholder="全部城市"
          collapse-tags
          clearable
          style="width: 180px; margin: 0 12px 0 6px"
          @change="changeCity"
          v-model="cityRef"
        />
        <!-- 门店 -->
        门店
        <el-cascader
          size="mini"
          :options="shopOptions"
          :props="props"
          placeholder="全部门店"
          collapse-tags
          clearable
          style="width: 180px; margin-left: 6px"
          @change="changeShop"
          v-model="storeRef"
        />
      </div>
      <!-- 时间标签 -->
      <div class="time-tag-wrap">
                <span v-for="item in timeTag" :key="item.keyVal" class="tag" :class="{ isTagActive: form.dateType == item.keyVal }" @click="form.dateType = item.keyVal">
                    {{ item.name }}
                </span>
      </div>
      <!-- 时间控件 -->
      <div class="time-widget">
        时间
        <el-date-picker
          v-model="form.timeslot"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px; margin-left: 12px"
          @change="timeChange"
        />
      </div>
    </li>
    <li class="right-filter-btn">
      <el-button size="small" type="primary" round icon="el-icon-search" @click="submit">筛选</el-button>
      <el-button size="small" type="primary" plain round icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </li>
  </ul>
</template>

<script>
import {getAllCities, getAllStores} from '@/api/DashBoardApi';

export default {
  data() {
    return {
      props: {multiple: true},
      timeTag: [
        {
          name: '今日',
          keyVal: '01'
        },
        {
          name: '本周',
          keyVal: '02'
        },
        {
          name: '本月',
          keyVal: '03'
        },
        {
          name: '半年',
          keyVal: '04'
        },
        {
          name: '全年',
          keyVal: '05'
        }
      ],
      cityOptions: [
        // {
        //     value: 2,
        //     label: '上海',
        //     children: [
        //         { value: 3, label: '普陀' },
        //         { value: 4, label: '黄埔' },
        //         { value: 5, label: '徐汇' }
        //     ]
        // }
      ],
      shopOptions: [
        // {
        //     value: 2,
        //     label: '餐饮',
        //     children: [
        //         { value: 3, label: '星巴克' },
        //         { value: 4, label: '海里捞' },
        //         { value: 5, label: '肯德基' },
        //         { value: 5, label: '麦当劳' }
        //     ]
        // }
      ],
      cityRef: [],
      storeRef: [],
      form: {
        cities: [],
        stores: [],
        dateType: '00', //00默认不选
        timeslot: '',
        startDate: '',
        endDate: ''
      }
    };
  },
  mounted() {
    this.getCityData();
    this.getStoreData();
  },
  methods: {
    getCityData() {
      this.loading = true;

      getAllCities({})
        .then((res) => {
          console.log('fj ' + res);
          this.cityOptions = res.obj;
        })
        .catch((error) => {
          console.error(error);
        });
      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },
    getStoreData() {
      this.loading = true;
      getAllStores({})
        .then((res) => {
          console.log('fj ' + res);
          this.shopOptions = res.obj;
        })
        .catch((error) => {
          console.error(error);
        });
      setTimeout(() => {
        this.loading = false;
      }, 1200);
    },
    timeChange() {
      let timeLot = this.form.timeslot;
      if (timeLot && timeLot.length > 0) {
        this.form.startDate = this.timeFormat(timeLot[0]);
        this.form.endDate = this.timeFormat(timeLot[1]);
      }
    },
    timeFormat(dateObj) {
      let execDateStr =
        dateObj.getFullYear() +
        '-' +
        (Number(dateObj.getMonth()) + 1 > 9 ? dateObj.getMonth() + '' : '0' + dateObj.getMonth()) +
        '-' +
        (Number(dateObj.getDate()) > 9 ? dateObj.getDate() : '0' + dateObj.getDate());
      return execDateStr;
    },
    submit() {
      this.$emit('filterSubmit', this.form);
    },
    reset() {
      this.form = {
        cities: [],
        stores: [],
        dateType: '00', //00默认不选
        timeslot: '',
        startDate: '',
        endDate: ''
      };
      this.cityRef = []
      this.storeRef = []
    },
    changeCity(val) {
      if (val && val.length > 0) {
        this.form.cities = val.join().split(',');
      } else {
        this.form.cities = [];
      }
    },
    changeShop(val) {
      if (val && val.length > 0) {
        this.form.stores = val.join().split(',');
      } else {
        this.form.stores = [];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.filter-data-container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #fff;
  border-radius: 20px;
  padding-left: 16px;

  .left-condition {
    flex: 1;

    .btn-group {
      display: inline-block;
      height: 32px;
      font-size: 14px;
      color: #4e5969;
      cursor: pointer;
    }

    .time-tag-wrap {
      display: inline-block;
      margin-left: 60px;
      cursor: pointer;

      .tag {
        font-size: 14px;
        color: #4e5969;
        margin-left: 20px;
      }

      .isTagActive {
        color: #0057fe;
      }
    }

    .time-widget {
      display: inline-block;
      margin-left: 80px;
      font-size: 14px;
      color: #4e5969;
    }
  }

  .right-filter-btn {
    flex: 0 0 180px;
  }
}
</style>
